<template>
  <div class="AlyBody">
    <div class="box">
      <div>
        <ul class="box-top flex justify-between">
          <li class="trees">
            <div class="sunshine flex justify-center">
              <img src="../../../assets/dataScreen/树林.svg" alt="" />
            </div>
            <div></div>
          </li>
          <li class="activity">
            <Activity />
          </li>
          <li>3</li>
        </ul>
      </div>
      <div>
        <ul class="box-bot flex justify-between">
          <li>1</li>
          <li>2</li>
          <li>3</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import Activity from './echars/Activity.vue'
</script>

<style scoped lang="scss">
.AlyBody {
  height: 100vh;

  .box {
    .box-top {
      height: 80vh;
      border: 1px solid red;
      padding: 10px;

      .trees {
        width: 25%;

        .sunshine {
          border: 0.1rem solid red;

          img {
            width: 15rem;
            height: 15rem;
          }
        }
      }

      .activity {
        height: 100%;
        border: 0.1rem solid red;
        width: 50%;
      }
    }

    .box-bot {
      height: 50vh;
      border: 1px solid white;
    }
  }
}
</style>
